<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
				<el-upload
				  class="avatar-uploader"
				  action="/api/system/user/profile/upload"
				  :headers="imgUpload.headers"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :before-upload="beforeAvatarUpload">
				  <img v-if="imageUrl" :src="imageUrl" class="avatar">
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                所属部门
                <div class="pull-right">{{ user.deptName }} / {{ postGroup }}</div>
              </li>
              <li class="list-group-item">
                所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料 {{base}}</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
				  <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
				  <resetPwd :user="user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getUserProfile } from '/api/userapi.js'
import userInfo from "/src/views/profile/userInfo.vue";
import resetPwd from "/src/views/profile/resetPwd.vue";
export default {
  name: 'Profile',
  components: { userInfo, resetPwd },
  data () {
    return {
		user: {},
		roleGroup: {},
		postGroup: {},
		activeTab: "userinfo",
		base: '/api',
		imageUrl: '',
		imgUpload: {
		    // 设置上传的请求头部
		    headers: {
		      Authorization: "Bearer " + localStorage.getItem('token')
		    },
		},
		fileList:[],
    }
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data.data;
		this.imageUrl = 'api'+this.user.avatar
        this.roleGroup = response.data.roleGroup;
        this.postGroup = response.data.postGroup;
      });
    },
	
		handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === "image/png"
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
		  this.$message.warning('上传头像图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
		  this.$message.warning('上传头像图片大小不能超过 2MB!')
        }

        return isJPG && isLt2M;
      }
	
  }
}
</script>

<style>
	.list-group{
		padding-left: 0px;
		list-style: none;
	}
	.pull-right{
		float: right!important;
	}
	.list-group-item{
		    border-bottom: 1px solid #e7eaec;
		    border-top: 1px solid #e7eaec;
		    margin-bottom: -1px;
		    padding: 11px 0;
		    font-size: 13px;
	}
	
	  .avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>